<template>
  <div class="contaniner">
    <div class="h3-left">
      <h3 class="h3-font">秋季特惠房源</h3>
    </div>
    <div class="sp-left">
      <span class="sp-font">低至8折，可叠加使用礼卷</span>
    </div>
    <div class="body-btn">
      <div class="btn-body">
        <div class="con-city">
          <span class="span-right" v-for="(item,index) in city" :key="index">
            <button class="btn-city">{{item.city}}</button>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
	  city:Array
  },
  data() {
    return {};
  }
};
</script>

<style scoped>
.contaniner {
  margin: 0 auto;
}

.h3-left {
  text-align: left;
  margin-top: 20px;
}

.h3-font {
  margin: 0;
  font-size: 24px;
}

.sp-left {
  text-align: left;
  color: #000;
  font-size: 16px;
  line-height: 22px;
}

.sp-left {
  margin: 0;
  font-family: Circular, "PingFang-SC", "Hiragino Sans GB", "微软雅黑",
    "Microsoft YaHei", "Heiti SC", Menlo, serif !important;
}
/*按钮*/
.btn-body {
  margin-top: 20px; /*设置外层div的上边距*/
}
.body-btn {
  white-space: nowrap;
  overflow: hidden;
  padding: 16px 8px;
  margin: -16px -8px;
}
/*设置按钮弹性布局 */
.con-city {
  display: flex;
  transform: translateX(0px);
}
/*按钮右外边距*/
.span-right {
  margin-right: 10px;
}
/*按钮样式*/
.btn-city {
  display: block;
  min-width: 120px;
  height: 48px;
  background: #fff;
  border-radius: 3px;
  padding: 14px 16px;
  border: 0.5px solid #d8d8d8;
  box-sizing: border-box;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
  font-size: 17px;
  color: #484848;
  text-align: center;
  font-weight: bolder;
  line-height: 20px;
  outline: none;
  transition: box-shadow 0.5s !important;
}
.btn-city:hover {
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
}
</style>
